<template>
  <div class="centerIntroduce">
    <Header></Header>
    <CarouselFigure class="carousel-figure-box"></CarouselFigure>

    <!-- 赋能中心介绍 -->
    <div class="center-intro-text titleBackGround">
      <p>
        SAP(四川)产业赋能中心 是由SAP 联合政府
        高定位、高标准建设的未来区域中心，旨在整合SAP全球资源，支持区域发展，服务本地企业。
      </p>
      <p>
        产业发展合作：围绕主导产业发展和世界一流园区的建设，在战略咨询、流程管理、数字化转型、产业集群、创新赋能等领域深化合作。
      </p>
      <p>
        智能制造赋能：利用SAP领先技术平台、产业经验、生态能力，以
        SAP(四川)产业赋能中心为主体，赋能区域企业智能化和智能制造。
      </p>
      <p>
        西部业务中心：委托智享慧科运营SAP(四川)产业赋能中心，致力于区域内企业/组织数字化转型能力的提升，整合国内乃至国际资源支持区域业务拓展，吸引/赋能生态伙伴聚集与发展，将SAP(四川)产业赋能中心建设为西部业务中心。
      </p>
    </div>

    <!-- 专家介绍 -->
    <div class="expertsInfo">
      <el-row class="expertsInfoTitle">
        <el-col :lg="2" :md="2" :sm="2" :xs="0"
          ><div style="opacity:0">1</div></el-col
        >
        <el-col :lg="6" :md="6" :sm="6" :xs="0">
          <span class="sectionTitle">SAP(四川)产业赋能中心-专家介绍</span>
        </el-col>
        <el-col :lg="1" :md="1" :sm="1" :xs="0"
          ><div style="opacity:0">1</div></el-col
        >
        <el-col :lg="8" :md="8" :sm="8" :xs="0">
          <el-input placeholder="请输入内容" class="input-with-select" v-model="search">
            <template slot="prepend"><i class="el-icon-search"></i></template>
          </el-input>
        </el-col>
        <el-col :lg="1" :md="1" :sm="1" :xs="0"
          ><div style="opacity:0">11</div></el-col
        >
        <el-col :lg="4" :md="4" :sm="4" :xs="0">
          <el-button class="btnStyle" @click="resExpert()">搜索</el-button>
          <el-button class="btnStyle" @click="cancleExpert()">取消</el-button>
        </el-col>
        <el-col :lg="2" :md="2" :sm="2" :xs="0"
          ><div style="opacity: 0;"></div
        ></el-col>
      </el-row>
    </div>

    <div class="expert-intro-list-title">
      <span></span>
      <span>专家列表</span>
    </div>

    <!-- 专家介绍详情 -->
    <el-row class="expertIntroDetailBox">
      <el-col :span="2"><div style="opacity: 0;">11</div></el-col>
      <el-col :span="20" class="expert-intro-detail-all">
        <ExpertDetailInfoItem
          v-for="(item, index) in allExpertsInfo"
          :key="index" :expertInfo = "item"
        ></ExpertDetailInfoItem>
      </el-col>
      <el-col :span="2"><div style="opacity: 0">11</div></el-col>
    </el-row>
    <el-pagination
      class="pagination-big"
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="handleCurrentChange"
    >
      </el-pagination>
    <Footer></Footer>
  </div>
</template>

<script>
// 组件
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import CarouselFigure from "@/components/CarouselFigure.vue";
import ExpertDetailInfoItem from "@/components/centerHome/ExpertDetailInfoItem.vue";

// 请求接口
import { ReqAllExperts,ReqExpert } from '../../request/index'
export default {
  data() {
    return {
      allExpertsInfo:[],
      total: 10,
      search:''
    };
  },
  components: {
    Header,
    Footer,
    CarouselFigure,
    ExpertDetailInfoItem,
  },
  methods:{
    async getAllExpertInfo(page) {
       let data = {
        page,
        limit: 10,
      };
      let allExperts = await ReqAllExperts(data);
      this.allExpertsInfo = allExperts.page.list;
      this.total = allExperts.page.totalCount;
    },
    handleCurrentChange(val) {
      this.getAllExpertInfo(val);
    },
    // 模糊搜索专家
    async resExpert(){
      let data ={
        limit:20,
        page:1,
        name:this.search
      }
     if(this.search!==''){
        let res = await ReqExpert(data)
       this.allExpertsInfo = res.page.list;
       this.total = allExperts.page.totalCount;
     }
    },
    // 取消搜索
    cancleExpert(){
      this.search =''
      this.getAllExpertInfo(1)
    }
  },
  created() {
    this.getAllExpertInfo(1)
  },
};
</script>

<style scoped>
.pagination-big{
  width: 200px;
  margin: 0 auto;
}
@import url("~assets/styles/centerHome/centerIntroduce.css");
.expertIntroDetailBox {
  margin-bottom: 30px;
}
.expert-intro-detail-all {
  box-shadow: 0px 0px 3px #ccc;
}
.btnStyle {
  background: #1b93c4;
  color: white;
  margin-top: 7px;
}
.expertsInfo {
  margin-top: 30px;
}
.input-with-select {
  margin-top: 7px;
}

.center-intro-text {
  display: none;
  padding: 10px;
  color: white;
  font-size: 14px;
}

.center-intro-text p {
  margin-bottom: 10px;
  line-height: 20px;
}

.expert-intro-list-title {
  display: none;
  margin: 0px 0px 20px 30px;
}
.expert-intro-list-title :nth-child(1) {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #018cbf;
  border-radius: 50%;
}
.expert-intro-list-title :nth-child(2) {
  color: #018cbf;
  padding-left: 10px;
  line-height: 15px;
}

@media screen and (max-width: 768px) {
  .expert-intro-list-title :nth-child(1) {
    width: 15px;
    height: 15px;
  }
  .expert-intro-list-title  {
    display: block;
  }
  .carousel-figure-box {
    display: none;
  }
  .center-intro-text {
    display: block;
  }
  .expertsInfo {
    margin-top: 0px;
  }
}
</style>
